import React from 'react'
import PropTypes from 'prop-types'
import {Badge, Table} from 'antd'
import {Link} from 'react-router-dom'
import classnames from 'classnames'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'

const DetailList = ({
  openTab, isMotion, ...tableProps
}) => {

  const statusMap = ['success', 'error', 'error']
  const status = ['待审核', '审核不通过', '审核通过待发货', '已发货', '已签收', '退回中', '退回签收', '已取消']

  const columns = [
    {
      title: '订单编号',
      dataIndex: 'sn',
      key: 'sn',
      width: 100,
      // fixed: 'left',
      render: (sn, record) => <Link to={'/sn/'.concat(record.id)} onClick={() => { openTab(sn) }}>{sn}</Link>,
    }, {
      title: '快递单号',
      dataIndex: 'expressNum',
      key: 'expressNum',
      width: 100,
    }, {
      title: '收货人',
      dataIndex: 'address',
      key: 'address.receiver',
      width: 150,
      render: address => address ? address.receiver : "-",
    }, {
      title: '订单状态',
      dataIndex: 'status',
      key: 'status',
      width: 120,
      render: (val) => <Badge status={statusMap[val]} text={status[val]} />,
    }, {
      title: '收货电话',
      dataIndex: 'address',
      key: 'address.dmobile',
      width: 100,
      render: address => address ? address.dmobile : "-",
    }, {
      title: '收货地址',
      dataIndex: 'address',
      key: 'address.address',
      width: 200,
      render: address => address ? address.address : "-",
    }, {
      title: '订单总金额',
      dataIndex: 'totalAmount',
      key: 'totalAmount',
      render: (val) => val + '元',
      width: 150,
    }, {
      title: '预付方式',
      dataIndex: 'prepayTypeName',
      key: 'prepayTypeName',
      width: 180,
    }, {
      title: '预付金额',
      dataIndex: 'preAmount',
      key: 'preAmount',
      width: 120,
      render: (val) => val + '元'
    }, {
      title: '下单员工',
      dataIndex: 'emp',
      key: 'emp_username',
      width: 100,
      render: emp => emp ? emp.username : "-",
    }, {
      title: '客户微号',
      dataIndex: 'dcustomerWxId',
      key: 'dcustomerWxId',
      width: 100,
    }, {
      title: '下单时间',
      dataIndex: 'ctime',
      key: 'ctime',
      width: 100,
    }, {
      title: '快递公司',
      dataIndex: 'expressTypeName',
      key: 'expressTypeName',
      width: 120,
    }, {
      title: '客户备注',
      dataIndex: 'customerRemark',
      key: 'customerRemark',
      width: 120,
    }, {
      title: '内部备注',
      dataIndex: 'empRemark',
      key: 'empRemark',
      width: 100,
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      className={classnames(styles.table)}
      scroll={{ x: 3500 }}
      columns={columns}
      simple
      rowKey={record => record.id}
      components={{
        body: { wrapper: isMotion ? AnimateBody : CommonBody },
      }}
    />
  )
}

DetailList.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  location: PropTypes.object,
}

export default DetailList
